<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<style type="text/css">
.jul{
	width: auto;
	display: block;
	margin: 0;
	padding: 0;
}
.data-list{
	margin: 0;
	padding: 0;
}
.jli{
	display:flex;
	display:-webkit-flex;
	height: auto;
	position: relative;
	padding:1rem;
	background: #fff;
}
.jli-icon{
	display: block;
	width: 3rem;
	height: 3rem;
	background:rgba(0,0,0,0.3);
	border-radius: 0.2rem;
	position: relative;
}
.jli-qipao{
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	background: orangered;
	position: absolute;
	right: -0.5rem;
	top: -0.5rem;
	border-radius: 2rem;
	text-align: center;
	line-height: 1.5rem;
	color: #fff;
}
.jli-contents{
	flex: 1;
	-webkit-flex: 1;
	padding: 0 0 0 1rem;
}
.jli-ctitle{
	font-size:16px;
	height: 1.5rem;
}
.jli-cdes{
	font-size:14px;
	color: #999;
	height: 1.5rem;
	line-height:2rem;
}
.jli-cdate{
	float: right;
	font-size:12px;
	color: #999;
	font-weight: normal;
}
.jtabs{
	position: fixed;
	height:3rem;
	background:#f5f5f5;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	display: flex;
	display: -webkit-flex;
}
.jtabheight{
	height:3rem;
}
.jtab-item{
	display: block;
	flex: 1;
	-webkit-flex: 1;
	text-align: center;
	line-height:3rem;
	font-size:16px;
	font-weight: bold;
}
.jtab-active{
	color: dodgerblue;
	border-bottom: 2px solid dodgerblue;
}
</style>
</head>
<body>
<div id="jcontent" class="jcontent">
	<div class="jtabs">
		<a data-tip="1" class="jtab-item jtab-active"><i class="iconfont icon-dynmenufriendsnormal"></i>&nbsp;&nbsp;公众号</a>
		<a data-tip="2" class="jtab-item"><i class="iconfont icon-shareenvelope"></i>&nbsp;&nbsp;私信</a>
	</div>
	<div class="jtabheight"></div>
	<ul id="data-list" class="jul"></ul>
	<div id="nodatas" class="nodatas">
		<span class="nodatas-icon"><i class="iconfont icon-wjl nodataicons"></i></span>
		<div class="nodata-tip">空空如也，没有找到数据</div>
	</div>
	<div id="loadingMore" class="hide">数据加 载中...</div>
</div>
<div class="index-bline"></div>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
<script src="js/page.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.plusReady(function(){
	_currentWebview=plus.webview.currentWebview();
});

/**
 * 加载数据的监听
 */
window.addEventListener("loadList", function(e) {
	loadUtil.loadList({
		url:"/carLife/admin/interface/dynamic/selectMessageDynamic",
		tip:1
	});
});

/**
 * 
 * 标签页的切换
 * 
 */
mui('#jcontent').on('tap','.jtab-item', function() {
	var _classList=this.classList;
	if(_classList.contains("jtab-active")){
		return false;
	}
	document.querySelector(".jtab-item.jtab-active").classList.remove("jtab-active");
	this.classList.add("jtab-active");
	//获取加载的数据类型
	var tip=this.getAttribute("data-tip");
	document.getElementById("data-list").innerHTML="";
	if(tip=="1"){
		loadUtil.loadList({
			url:"/carLife/admin/interface/dynamic/selectMessageDynamic",
			tip:1
		});
	}else if(tip==2){
		loadUtil.loadList({
			url:"/carLife/admin/interface/privateLetter/selectNotReadGroup",
			tip:2
		});
	}
});

mui('#data-list').on('tap','.jli', function() {
	var businessId=this.getAttribute("data-sellerId");
	var tip=this.getAttribute("data-tip");
	var sellerName=this.getAttribute("data-sellerName");
	if(tip=="1"){
		webapp.openByTpl({
			title:"商家详情",
			hrefs:"/tpl/4s.html?business="+businessId
		});
	}else if(tip=="2"){
		webapp.openByTpl({
			title:sellerName,
			hrefs:"/tpl/sixin.html?business="+businessId
		});
	}
});



</script>
<script id="tpl-list" type="text/html">
{{each data as item i}}
<li class="jli line-b list-item"  data-id="{{item.id}}" data-tip="{{tip}}" data-sellerId="{{item.sellerId}}" data-sellerName="{{item.sellerName}}">
	<a class="jli-icon">
		<img src="{{imgPath}}{{item.logoImage}}" class="img"/>
		<div class="jli-qipao">{{item.notReadNum}}</div>
	</a>
	<div class="jli-contents">
		<div class="jli-ctitle">
			{{item.sellerName}}
			<span class="jli-cdate">{{dateFormat(item.createTime,'yyyy-MM-dd')}}</span>
		</div>
		<div class="jli-cdes">
		{{item.content}}
		</div>
	</div>
</li>
{{/each}}
</script>
</body>
</html>
